<template>
  <div>
    <el-row>
      <el-col :span="5">
        <el-form-item label="字段名">
          <el-input v-model="querySourceFieldName" clearable placeholder="请输入" @keyup.enter="crud.toQuery" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
        <el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery">重置</el-button>
      </el-col>
    </el-row>
    <el-table :data="fieldMaps" max-height="400" height="400">
      <el-table-column label="源表字段名" prop="sourceFieldName" />
      <el-table-column label="源表字段类型" prop="sourceFieldType" />
      <el-table-column label="源表字段长度" prop="sourceFieldLength" />
      <el-table-column label="源表备注" prop="sourceComment" />
      <el-table-column label="目标表字段名" prop="targetFieldName">
        <template slot-scope="scope">
          <el-input v-model="scope.row.targetFieldName" :disabled="isHiddenValu" />
        </template>
      </el-table-column>
      <el-table-column label="目标表字段类型" prop="targetFieldType">
        <template slot-scope="scope">
          <el-input v-model="scope.row.targetFieldType" :disabled="isHiddenValu" />
        </template>
      </el-table-column>
      <el-table-column label="目标表字段长度" prop="targetFieldLength">
        <template slot-scope="scope">
          <el-input v-model="scope.row.targetFieldLength" :disabled="isHiddenValu" />
        </template>
      </el-table-column>
      <el-table-column label="目标表备注" prop="targetComment">
        <template slot-scope="scope">
          <el-input v-model="scope.row.targetComment" :disabled="isHiddenValu" />
        </template>
      </el-table-column>
      <el-table-column v-if="needPartition === '1'" label="是否分区字段" prop="isPartitionField">
        <template slot-scope="scope">
          <el-checkbox
            v-model="scope.row.isPartitionField"
            :disabled="isHiddenValu"
            label="分区字段"
            true-label="Y"
            false-label="N"
            @change="cleanPartitionMapping(scope)"
          />
        </template>
      </el-table-column>
      <el-table-column v-if="needPartition === '1'" label="分区字段映射" prop="partitionFieldMapping">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.partitionFieldMapping"
            :disabled="isHiddenValu || scope.row.isPartitionField === 'N' "
            placeholder="请选择"
            clearable
          >
            <el-option v-for="item in partitionFieldName" :key="item" :label="item" :value="item" />
          </el-select>
        </template>
      </el-table-column>
    </el-table>
    <template>
      <el-pagination
        :page-sizes="[10, 20, 30, 40, 50,100]"
        :page-size="pageSize"
        :total="total"
        :current-page="currentPage"
        style="margin-top: 8px;float: right"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </template>
  </div>
</template>

<script>
import { pagination } from '@crud/crud'
import tableTransferFieldMap from '@/api/data/table/tableTransferFieldMap'
import CRUD, { presenter, header, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation.vue'
import crudOperation from '@crud/expand/data/contrast/task/CRUD.operation.vue'
import udOperation from '@crud/UD.operation.vue'

const defaultCrud = CRUD({
  title: '字段映射',
  url: '/api/data/table/fieldMap',
  crudMethod: { ...tableTransferFieldMap }
})
export default {
  name: 'TableTransferFieldMap',
  // eslint-disable-next-line vue/no-unused-components
  components: { crudOperation, rrOperation, udOperation, pagination },
  mixins: [presenter(defaultCrud), header(), crud(), pagination()],
  props: {
    fieldMaps: {
      required: true,
      type: Array
    },
    listPkId: {
      required: true,
      type: String
    },
    isHiddenValu: {
      required: true,
      type: Boolean
    },
    needPartition: {
      required: true,
      type: String
    },
    partitionFieldName: {
      required: true,
      type: Array
    },
    total: {
      required: true,
      type: Number
    }
  },
  data() {
    return {
      fieldFlag: false,
      showCreateSqlFlag: false,
      historyDetail: false,
      currentPage: 1,
      pageSize: 10,
      fileList: [],
      dataSourceList: [],
      dataDbList: [],
      dataTableList: [],
      createTaskType: '直连',
      sourceDbName: '',
      targetDbName: '',
      chooseTable: false,
      chooseData: [],
      querySourceFieldName: '',
      originalList: '',
      pagerCount: 10
    }
  },
  methods: {
    [CRUD.HOOK.beforeRefresh](crud) {
      crud.query.listPkId = this.listPkId
      if (this.partitionFieldName.length === 0) {
        this.partitionFieldName.put('DT')
      }
    },
    // 取消 设置字段为分区字段时，清楚对该字段对于分区字段的映射信息
    cleanPartitionMapping(scope) {
      if (scope.row.isPartitionField === 'N') {
        scope.row.partitionFieldMapping = ''
      }
    },
    // 分页组件相关
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getTableList()
    },
    // 分页组件相关
    handleCurrentChange(val) {
      this.currentPage = val
      this.getTableList()
    },
    // 分页查询信息
    getTableList() {
      const data = { listPkId: this.listPkId, pageIndex: this.currentPage - 1, pageSize: this.pageSize }
      tableTransferFieldMap.findListByPage(data).then((res) => {
        this.fieldMaps = res.content
        this.$emit('fieldMapChange', this.fieldMaps)
        this.total = res.total
        this.pageSize = res.pageSize
      })
    },
    // 搜索操作
    toQuery() {
      const param = { listPkId: this.listPkId, sourceFieldName: this.querySourceFieldName, pageIndex: 0, pageSize: this.pageSize }
      tableTransferFieldMap.findListByPage(param).then((res) => {
        this.fieldMaps = res.content
        this.$emit('fieldMapChange', this.fieldMaps)
        this.total = res.total
        this.pageSize = res.pageSize
      })
    },
    // 重置搜索
    resetQuery() {
      this.getTableList()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-divider--horizontal {
  margin: 5px 0px;
}
</style>
